<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/user.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="top">
    <h1>用户中心</h1>
    <div class="container">
        <div class="section">
            <a href="user.html">修改个人信息</a>
        </div>
        <div class="section">
            <a href="index.html">留言板</a>
        </div>
        <div class="section">
            <a href="user_index.html">个人主页</a>
        </div>
    </div>
</div>

<div class="body">
<div class="container2">
    <h1>用户中心</h1>
    <div class="row">
        <img id="photo" alt="个人头像" style="display: block; margin: 0 auto; height: 150px;width: 150px">
        <input id="file" type="file" style="margin-bottom: 10px;">
        <button onclick="savePhoto()">保存</button>
    </div>
    <div class="row">
        <span>用户名</span>
        <input type="text" id="username">
    </div>
    <div class="row">
        <span>原密码</span>
        <input type="password" id="old_password">
    </div>
    <div class="row">
        <span>新密码</span>
        <input type="password" id="password">
    </div>
    <div class="row">
        <span>确认密码</span>
        <input type="password" id="password2">
    </div>
    <div class="row">
        <span>邮箱</span>
        <input type="text" id="email">
    </div>
    <div class="row">
        <button id="submit" onclick="updateUser()">修改</button>
    </div>
</div>
</div>
<script>
    $(document).ready(function() {
        $.ajax({
            url: '/user/getPhoto',
            method: 'GET',
            responseType: 'json',
            success: function(url) {
                $('#photo').attr('src',"photo/"+ url.data);

                $('#photo').on('load', function() {
                    URL.revokeObjectURL(this.src);
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error fetching image:', textStatus, errorThrown);
                $('#photo').attr('src', 'error.png'); // 设置默认错误图片
            }
        });
    });
    function updateUser() {
        var username = $('#username').val();
        var old_password = $('#old_password').val();
        var password = $('#password').val();
        var email = $('#email').val();
        $.ajax({
            url: '/user/updateUser',
            method: 'POST',
            data: {
                username: username,
                old_password: old_password,
                password: password,
                email:email
            },
            success: function(data) {
                alert("修改成功！");
            },
            error: function(data) {
                alert("原始密码错误");
            }
        })
        window.location.href("user.html");
    }
    function savePhoto() {
        const fileInput = $('#file')[0];
        const file = fileInput.files[0];

        if (!file) {
            alert('请选择一张图片！');
            return;
        }

        const formData = new FormData();
        formData.append('photo', file);

        $.ajax({
            url: 'user/photo', // 替换为你的上传接口
            type: 'POST',
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function(data) {
                if (data.code==200) {
                    alert('图片上传成功！');
                } else {
                    alert('图片上传失败：' + data.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('上传图片时发生错误：', textStatus, errorThrown);
                alert('上传图片时发生错误，请稍后再试。');
            }
        });
        window.location.href("user.html");
    }
</script>


</body>
</html>